<template>
    <router-link v-if="useAdress.addresseeId" to="/address" class="addressBox">
        <div class="address">
             <h4>收货地址</h4>
             <p>{{useAdress.address}}</p>
             <p>{{useAdress.linkName}} {{useAdress.linkPhone}}</p>
        </div>
        <!-- <i class="iconfont icon-xiangyoujiantou"></i> -->
    </router-link>
    <router-link v-else class="noAddress" to="/address">点击设置收货地址</router-link>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'

export default {
    components:{
       
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            useAdress:computed(()=>store.state.arApi.useAdress),
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .addressBox{
        display: flex;
        width: 100%;
        padding: 0 0 30px 0;
        line-height: normal;
        color: #fff;
        border-bottom: 1px solid rgba(217, 217, 217, 0.3);
        .address{
            flex: 1;
            h4{
                font-size: 30px;
                font-weight: bold;
                color: var(--baseColor);
            }
            p{
                font-size: 28px;
                line-height: 46px;
                padding: 20px 0 0 0;
            }
        }
        i{
            display: flex;
            width: 100px;
            align-items: center;
            justify-content: end;
        }
    }
    .noAddress{
        display: block;
        width: 100%;
        height: 190px;
        text-align: center;
        line-height: 186px;
        background: #0E6161;
        border: 2px solid var(--baseColor);
        font-size: 30px;
        color: #fff;
        font-weight: 500;
        margin: 0 0 22px 0;
    }
</style>